<template>
  <div>
 <!-- 头部 -->
 <div class="header wrapper">
        <h1>
            <a href="#"><img src="./images/Course classification/logo.png" alt=""></a>
        </h1>
        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程分类</a></li>
                <li><a href="About Us.html">关于我们</a></li>
                <li><a href="#">客服中心</a></li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search">
            <input type="text" placeholder="请输入关键字">
            <button></button>
        </div>
        <!-- 用户 -->
        <div class="user">
            <img src="./images/Course classification/user.png" alt="">
            <span>jony</span>
        </div>
    </div>
    <!-- 轮播图 -->
<div class="banner">
    <div class="wrapper">
        <div class="left">
            <ul>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
                <li><a href="#">前端开发<span>></span></a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 精品推荐 -->
<div class="goods wrapper">
    <h2>猜你想学</h2>
    <ul>
        <li><a href="#">java</a></li>
        <li><a href="#">java</a></li>
        <li><a href="#">java</a></li>
        <li><a href="#">java</a></li>
        <li><a href="#">java</a></li>
        <li><a href="#">java</a></li>
    </ul>
    <a href="#" class="change">修改</a>
</div>
<!-- java课程 -->
<div class="box wrapper">
    <div class="title1">
        <p>
            <span>Java培训</span>
        </P>
    </div>
    <div class="title2">
        <p>
            <span>Java永不落后的“王者”编程语言</span>
        </p>
    </div>
</div>
<!-- 图片 -->
<div class="picture">
    <div class="picture_state0">
        <div class="picture_state0_content">
            <div class="pic">
                <a href="#"><img src="./images/Course classification/u433.png"></a>
            </div>
        </div>
    </div>
</div>
<div class="pic_teacher">
    <a href="#"><img class="pic_img" src="./images/Course classification/u434.png" alt=""></a>
</div>
<!-- Java资讯 -->
<div class="j1">
    <div class="j1_div"></div>
    <div class="j1_text">
        <p>
            <span>Java资讯</span>
        </p>
    </div>
</div>
<!-- line -->
<div class="line">
    <img class="line_img" src="./images/Course classification/u454.svg" alt="">
</div>
<!-- 资讯内容 -->
<!-- 矩形1  -->
    <div class="j2">
      <div class="j2_div"></div>
      <div class="j2_text">
        <p><span>&nbsp;秃顶率最高的职业公布！程序员竟然只能排名第</span></p>
      </div>
    </div>

<!-- 椭圆1  -->
    <div class="round">
      <img class="img" src="./images/Course classification/u452.svg">
      <div class="round_text " style="display:none; visibility: hidden">
        <p></p>
      </div>
    </div>
  <!-- 矩形2 -->
<div class="j3">
    <div class="j3_div"></div>
    <div class="j3_text">
        <p><span>关于程序员的57件趣事</span></p>
    </div>
</div>
  <!-- 椭圆2 -->
  <div class="round2">
    <img class="round2_img" src="./images/Course classification/u452.svg">
    <div class="round2_text " style="display:none; visibility: hidden">
      <p></p>
    </div>
  </div>
  <!-- 矩形3 -->
  <div class="j4">
    <div class="j4_div"></div>
    <div class="j4_text">
        <p><span>再见了IE浏览器...</span></p>
    </div>
</div>
  <!-- 椭圆3 -->
  <div class="round3">
    <img class="round3_img" src="./images/Course classification/u452.svg">
    <div class="round3_text " style="display:none; visibility: hidden">
      <p></p>
    </div>
  </div>



<!--前端课程 -->
<div class="box wrapper">
    <div class="title3">
        <p>
            <span>前端培训</span>
        </P>
    </div>
    <div class="title4">
        <p>
            <span>培养一流的前端全栈式工程师</span>
        </p>
    </div>
</div>
<!-- 图片 -->
<div class="picture1">
    <div class="picture_state1">
        <div class="picture_state1_content">
            <div class="pic1">
                <a href="#"><img src="./images/Course classification/u462.png"></a>
            </div>
        </div>
    </div>
</div>
<div class="pic_teacher1">
    <a href="#"><img class="pic_img" src="./images/Course classification/u463.png" alt=""></a>
</div>
<!-- 前端资讯 -->
<div class="f1">
    <div class="f1_div"></div>
    <div class="f1_text">
        <p>
            <span>前端资讯</span>
        </p>
    </div>
</div>
<!-- line -->
<div class="line2">
    <img class="line_img" src="./images/Course classification/u454.svg" alt="">
</div>
<!-- 资讯内容 -->
<!-- 矩形1  -->
<div class="f2">
    <div class="f2_div"></div>
    <div class="f2_text">
      <p><span>&nbsp;GitHub发布2021年度报告！原来全球程序员都在卷！</span></p>
    </div>
  </div>

<!-- 椭圆1  -->
  <div class="f_round">
    <img class="f_img" src="./images/Course classification/u452.svg">
    <div class="f_round_text " style="display:none; visibility: hidden">
      <p></p>
    </div>
  </div>
<!-- 矩形2 -->
<div class="f3">
  <div class="f3_div"></div>
  <div class="f3_text">
      <p><span>2020年，前端开发人员应该学习的10件事</span></p>
  </div>
</div>
<!-- 椭圆2 -->
<div class="f_round2">
  <img class="f_round2_img" src="./images/Course classification/u452.svg">
  <div class="f_round2_text " style="display:none; visibility: hidden">
    <p></p>
  </div>
</div>
<!-- 矩形3 -->
<div class="f4">
  <div class="f4_div"></div>
  <div class="f4_text">
      <p><span>谷歌Android 12 Beta 4发布</span></p>
  </div>
</div>
<!-- 椭圆3 -->
<div class="f_round3">
  <img class="f_round3_img" src="./images/Course classification/u452.svg">
  <div class="f_round3_text " style="display:none; visibility: hidden">
    <p></p>
  </div>
</div>



<!--UI课程 -->
<div class="box wrapper">
    <div class="title5">
        <p>
            <span>UI设计</span>
        </P>
    </div>
    <div class="title6">
        <p>
            <span>培养全能型UI设计师</span>
        </p>
    </div>
</div>
<!-- 图片 -->
<div class="picture2">
    <div class="picture_state2">
        <div class="picture_state2_content">
            <div class="pic2">
                <a href="#"><img src="./images/Course classification/u492.png"></a>
            </div>
        </div>
    </div>
</div>
<div class="pic_teacher2">
    <a href="#"><img class="pic_img" src="./images/Course classification/u493.png" alt=""></a>
</div>
<!-- UI资讯 -->
<div class="u1">
    <div class="u1_div"></div>
    <div class="u1_text">
        <p>
            <span>UI设计资讯</span>
        </p>
    </div>
</div>
<!-- line -->
<div class="line3">
    <img class="line_img" src="./images/Course classification/u454.svg" alt="">
</div>
<!-- 资讯内容 -->
<!-- 矩形1  -->
<div class="u2">
    <div class="u2_div"></div>
    <div class="u2_text">
      <p><span>&nbsp;新手如何在短时间内成为一名高大上的UI设计师?</span></p>
    </div>
  </div>

<!-- 椭圆1  -->
  <div class="u_round">
    <img class="u_img" src="./images/Course classification/u452.svg">
    <div class="u_round_text " style="display:none; visibility: hidden">
      <p></p>
    </div>
  </div>
<!-- 矩形2 -->
<div class="u3">
  <div class="u3_div"></div>
  <div class="u3_text">
      <p><span>2022年的9个视觉设计趋势，简直酷爆了！</span></p>
  </div>
</div>
<!-- 椭圆2 -->
<div class="u_round2">
  <img class="u_round2_img" src="./images/Course classification/u452.svg">
  <div class="u_round2_text " style="display:none; visibility: hidden">
    <p></p>
  </div>
</div>
<!-- 矩形3 -->
<div class="u4">
  <div class="u4_div"></div>
  <div class="u4_text">
      <p><span> UI设计行业未来发展的三个趋势</span></p>
  </div>
</div>
<!-- 椭圆3 -->
<div class="u_round3">
  <img class="u_round3_img" src="./images/Course classification/u452.svg">
  <div class="u_round3_text " style="display:none; visibility: hidden">
    <p></p>
  </div>
</div>


<!-- 产品经理培训 -->
<div class="box wrapper">
    <div class="title7">
        <p>
            <span>产品经理培训</span>
        </P>
    </div>
    <div class="title8">
        <p>
            <span>培养能够真正赋予产品灵魂的互联网人才</span>
        </p>
    </div>
</div>
<!-- 图片 -->
<div class="picture3">
    <div class="picture_state3">
        <div class="picture_state3_content">
            <div class="pic3">
                <a href="#"><img src="./images/Course classification/u494.png"></a>
            </div>
        </div>
    </div>
</div>
<div class="pic_teacher3">
    <a href="#"><img class="pic_img" src="./images/Course classification/u508.png" alt=""></a>
</div>
<!-- 产品经理资讯 -->
<div class="m1">
    <div class="m1_div"></div>
    <div class="m1_text">
        <p>
            <span>产品经理资讯</span>
        </p>
    </div>
</div>
<!-- line -->
<div class="line4">
    <img class="line_img" src="./images/Course classification/u454.svg" alt="">
</div>
<!-- 资讯内容 -->
<!-- 矩形1  -->
<div class="m2">
    <div class="m2_div"></div>
    <div class="m2_text">
      <p><span>&nbsp;成功转行产品经理有哪些注意事项？</span></p>
    </div>
  </div>

<!-- 椭圆1  -->
  <div class="m_round">
    <img class="m_img" src="./images/Course classification/u452.svg">
    <div class="m_round_text " style="display:none; visibility: hidden">
      <p></p>
    </div>
  </div>
<!-- 矩形2 -->
<div class="m3">
  <div class="m3_div"></div>
  <div class="m3_text">
      <p><span>五年后，产品经理真的会消失么？</span></p>
  </div>
</div>
<!-- 椭圆2 -->
<div class="m_round2">
  <img class="m_round2_img" src="./images/Course classification/u452.svg">
  <div class="m_round2_text " style="display:none; visibility: hidden">
    <p></p>
  </div>
</div>
<!-- 矩形3 -->
<div class="m4">
  <div class="m4_div"></div>
  <div class="m4_text">
      <p><span> 在成都月薪16K是什么水平？</span></p>
  </div>
</div>
<!-- 椭圆3 -->
<div class="m_round3">
  <img class="m_round3_img" src="./images/Course classification/u452.svg">
  <div class="m_round3_text " style="display:none; visibility: hidden">
    <p></p>
  </div>
</div>
<!-- 常见问题 -->
<div class="question">
    <div class="question_div"></div>
    <div class="question_text">
      <p><span>常见问题</span></p>
    </div>
  </div>
  <!-- 底部图片 -->
  <div class="pic4">
    <a href="#"><img class="pic4_img" src="images/Course classification/u171.png"></a>
    </div>
<div class="pic5" >
        <a href="#"><img class="pic5_img" src="images/Course classification/u170.png" tabindex="0"></a>
    </div>
  </div>
</template>
<script>
export default {
  name: 'APP',
  data () {
    return {
    }
  },
  methods: {
  },
  created () {
  },
  mounted () {
  },
}
</script>
<style lang="scss" scoped>

</style>
